<template>
  <div id="app">
    <h1 class="activity-title">为你优选丨麦德龙跨年好礼@你，快来查收这份精选清单！</h1>
    <p class="activity-sub-title">2017-12-28 <a href="#">麦德龙METRO</a></p>
    <img style="width: 100%;"
         src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1520946030728&di=344bbd5ff182fe6d0e2cb1fd712314a1&imgtype=0&src=http%3A%2F%2Fimg1.3lian.com%2F2015%2Fa1%2F95%2Fd%2F105.jpg">
    <p class="activity-con">麦德龙年末提前大放价！万千好物只为你优选！网上商城立即下单或直接前往麦德龙商场选购！活动截止时间为2018年1月3日，只剩最后7天，赶紧行动哟！</p>
    <ul style="height: 400px;">
      <li style="width: 50%; float: left; text-align: center;padding: 5px 0;" v-for="product in productlist">
        <img style="width: 9rem; height: 9rem;"
             :src="product.productPicURL">
        <p style="font-size: .8rem; font-weight: bold;overflow:hidden;white-space:nowrap;padding: 0 10px;text-overflow: ellipsis; ">{{product.productName}}</p>
        <p style="font-size: .6rem;">{{product.desc}}</p>
        <p style="font-size: .6rem; color:#f00;">￥<span style="font-size: .8rem;">{{product.price}}</span></p>
        <p style="font-size: .6rem;">已卖出<span style="color:#f00;">{{product.cateId}}</span></p>
        <a style="display: inline-block; padding: .3rem 2.0rem; border-radius: .2rem; background: #f00; color:#fff; font-size: .6rem;text-decoration:none" :href="product.productUrl">立即抢购</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'app',
  mounted () {
      this.getProductList();
  },
  data () {
    return {
      msg: 'Welcome to Your  App',
      productlist:[]
    }
  },
  methods: {
    getProductList() {
      this._http.get("recommend.php", {path: window.location.href}).then((res => {
        console.info(res);
        if(res.code === 1){
            return window.location.href = this._http.site() + res.value.redirect;
        }
        if(res.code !== 0){
           console.info(res.message);
           return;
         }
        this.productlist = res.value;
      }).bind(this));
    }
  }
}
</script>

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2 {
  font-weight: normal;
}

p {
  margin: 0
}

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul, li > p {

}

.activity-title {
  font-size: 1.1rem;
}

.activity-sub-title {
  font-size: 0.5rem;
  margin: 0.5rem 0;
}

.activity-con {
  font-size: 0.35rem;
}
</style>
